// 本模块负责维护用户个人信息
// 引入jquery  发送jsonp请求
import $ from 'jquery';


let username = document.getElementById("usernameVal")
let password = document.getElementById("password")
let nickname = document.getElementById("nickname")
let phoneNumber = document.getElementById("phoneNumber")
let email = document.getElementById("email")
let sex = document.getElementById("sex")
let province = document.getElementById("province")
let city = document.getElementById("city")
let district = document.getElementById("district")
let personalSign = document.getElementById("personalSign")



// 添加省份的change事件
let $province = $("#province");
let $city = $("#city");
let $district = $("#district");

$province.on("change", function () {
    $.ajax({
        url: 'https://fts.jd.com/area/get',
        data: { fid: $province.val() },
        jsonpCallback: "aaa",
        dataType: "jsonp", // 关键是这一条  
        success(data) {
            $city.html("<option class='d-none'>-------</option>" + data.map(val => `<option value=${val.id}>${val.name}</option>`).join(""))
        }
    })

    // 清空城市 清空县区
    $city.empty();
    $district.html("");
})


$city.on("change", function () {
    // 得到城市的value
    $.ajax({
        url: 'https://fts.jd.com/area/get',
        data: { fid: $city.val() },
        jsonpCallback: "aaa",
        dataType: "jsonp", // 关键是这一条  
        success(data) {
            $district.html("<option class='d-none'>-------</option>" + data.map(val => `<option value=${val.id}>${val.name}</option>`).join(""))
        }
    })
    // 清空县区
    $district.html("");
})




// 修改功能
let btn = document.getElementById("btn");
btn.onclick = async function () {
    // 获取表单中的信息
    // authrization   token
    // username		用户名
    // password		密码
    // nickname		昵称
    // phoneNumber		手机号
    // email			邮箱
    // sex				性别
    // province		省份
    // city			城市
    // district		县区
    // personalSign	个性签名
    let obj = {
        authrization: localStorage.getItem("token"),
        username: username.value,
        password: password.value,
        nickname: nickname.value,
        phoneNumber: phoneNumber.value,
        email: email.value,
        sex: sex.value,
        province: province.value,
        city: city.value,
        district: district.value,
        personalSign: personalSign.value,
    }

    // 拼接成字符串
    var querystring = '';
    for (var i in obj) {
        querystring += i + "=" + obj[i] + "&"
    }
    querystring = querystring.slice(0, -1);

    let res = await fetch('/guyun/update_user_info', {
        method: "post",
        body: querystring,
        headers: {
            "Content-type": "application/x-www-form-urlencoded"
        }
    })

    let data = await res.json();
    console.log(data);

    // axios 是一个专门发送请求的基于Promise封装的库 
    console.log(obj)

}


// 发送请求获取用户的全部信息
fetch('/guyun/get_all_user_info?authrization=' + localStorage.getItem("token"))
    .then(res => res.json())
    .then(function (data) {
        console.log(data);
        if (data.error === 0) {
            let { city: cityValue, district: districtValue, email: emailValue, nickname: nicknameValue, password: passwordValue, personalSign: personalSignValue, phoneNumber: phoneNumberValue, province: provinceValue, sex: sexValue, username: usernameValue } = data.data;

            // 基础信息
            email.value = emailValue || "";
            nickname.value = nicknameValue;
            password.value = passwordValue;
            personalSign.value = personalSignValue || "";
            phoneNumber.value = phoneNumberValue || "";
            sex.value = sexValue;
            username.value = usernameValue;


            // jQuery发送jsonp请求获取全国的所有省份并渲染在省份下拉框中
            $.ajax({
                url: 'https://fts.jd.com/area/get',
                data: { fid: 4744, callback: "aaa" },
                callbackname: "aaa",
                dataType: "jsonp", // 关键是这一条  
                success(data) {
                    province.innerHTML = data.map(val => `<option value=${val.id}>${val.name}</option>`).join("")

                    if (!provinceValue) {
                        return;
                    }
                    province.value = provinceValue;
                    // jQuery发送jsonp请求 请求某一个省份的所有城市信息 

                    $.ajax({
                        url: 'https://fts.jd.com/area/get',
                        data: { fid: provinceValue, callback: "aaa" },
                        callbackname: "aaa",
                        dataType: "jsonp", // 关键是这一条  
                        success(data) {
                            city.innerHTML = data.map(val => `<option value=${val.id}>${val.name}</option>`).join("")
                            city.value = cityValue

                            // jQuery发送jsonp请求请求某一个城市下的所有县区 
                            $.ajax({
                                url: 'https://fts.jd.com/area/get',
                                data: { fid: cityValue, callback: "aaa" },
                                callbackname: "aaa",
                                dataType: "jsonp", // 关键是这一条  
                                success(data) {
                                    district.innerHTML = data.map(val => `<option value=${val.id}>${val.name}</option>`).join("")
                                    district.value = districtValue;
                                }
                            })
                        }
                    })

                }
            })

            // // 省份 城市 县区这三个信息是请求回来的。
            // province.value = provinceValue;
            // city.value = cityValue;
            // district.value = districtValue;


            return;
        }
    })